<script setup>
import {ref} from "vue";
import {useUserStore} from "@/stores/index.js";
import {userLoginServe} from "@/api/user.js";
import router from "@/router/index.js";

const userStore = useUserStore()

const isRemember = ref(true)

//登录表单数据
const formModel = ref({
  school: '郑州工商学院',
  account: '',
  password: ''
})

//表单数据校验
const rules = ref({
  account: [
    { required: false, message: '请输入学号', trigger: 'blur' },
    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
  ],
})

//-----------------------------------------登录事件处理-----------------------------------------
const  login = async () => {
  const res = await userLoginServe(formModel.value)
  if (res.code === 200) {
    console.log(res.data)
    // 存下user的各种信息（userName、id、token）
    userStore.setUserName(res.data.userName)
    userStore.setId(res.data.id)
    userStore.setToken(res.data.token)
    // 弹出消息
    ElMessage.success('登录成功')
    // 跳转首页
    await router.push('/')
  }
}
</script>

<template>
  <el-row class="login-page">
    <el-col :span="2"></el-col>
    <el-col :span="7" class="left" >
      <img src="@/assets/img/logo.png" alt="">
      <div class='bottom'>
          <div class="column-bar"></div>

          <div class="text">
            <div class="title">智启知心-校园智能助教平台</div>
            <div class="content">因智而启，由心而懂——打造专属你的学习旅程</div>
          </div>
        </div>
    </el-col>
    <el-col :span="1"></el-col>
    <el-col :span="9" class="right" >
      <div class="box">
        <el-form :label-position="'top'" autocomplete="off" :model="formModel" :rules="rules" class="form">

        <img src="@/assets/img/logo.png" alt="" class="logo top">

        <div class="title top">登录</div>

        <el-form-item label="所在学校" style="font-size:20px">
          <el-input disabled v-model="formModel.school" size="large" style="height: 50px; font-size: 16px"></el-input>
        </el-form-item>

        <el-form-item label="学号" prop="account">
          <el-input v-model="formModel.account"  clearable size="large" style="height: 50px;font-size: 18px"></el-input>
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="formModel.password" show-password size="large" style="height: 50px;font-size: 16px"></el-input>
        </el-form-item >

        <div class="checkbox">
          <el-checkbox v-model="isRemember" style="color: #333333">记住我</el-checkbox>
          <el-link type="primary" :underline="true" style="color:rgba(89, 24, 240, 1);">忘记密码？</el-link>
        </div>

        <el-button class="button" @click="login">登录</el-button>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.login-page {
  height: 100vh;
  width: 100%;
  background-image: url('@/assets/img/loginBackground.png');
  background-repeat: no-repeat;
  background-size: cover;
  .right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .box{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(20px);
      width: 85%;
      height: 75%;
      box-shadow: 0 19px 39px  rgba(222, 225, 255, 1);
      border-radius: 25px;
      .top{
        margin-top: 10px;
        margin-bottom: 20px;
      }
      .form{
        width: 64%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        .logo{
          width: 57px;
          height: 55px;
        }
        .title{
          font-size: 30px;
          font-weight: 700;
          letter-spacing: 1px;
        }
        .button{
          width: 100%;
          height: 60px;
          background: linear-gradient(270deg, rgba(198, 173, 255, 1) 0%, rgba(102, 170, 237, 1) 100%);
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-size: 20px;
          border-radius: 10px;
          letter-spacing: 10px;
          font-weight: 700;
        }
        .checkbox{
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  .left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -100px;
    gap: 44px;
    color: #333333;
    .bottom{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 28px;
      .column-bar{
        width: 4px;
        height: 85px;
        background: rgba(71, 71, 71, 1);
        border-radius: 2px;
      }
      .text{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap:5px;
        .title{
          letter-spacing: 1px;
          font-size: 36px;
        }
        .content{
          letter-spacing: 1px;
          font-size: 19px;
        }
      }
    }
  }

}

</style>
